import { ref, h, onMounted } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useRoute } from "vue-router";
import { useRouterNavigation } from "@/router/utils";
import editForm from "../../form/index.vue";
import type { FormItemProps } from "../../utils/types";
import { addDialog } from "@/components/ReDialog";
import { message } from "@/utils/message";
import { CodeToText, convertTextToCode } from "@/utils/chinaArea";

import {
  getDepositoryDetail,
  depositoryUpdate
} from "@/api/basicArchives/warehouseManagement";

export function useDepositoryDetil() {
  // 返回上一页
  const { go } = useRouterNavigation();
  function goBack(n) {
    go(n);
  }

  const formRef = ref();

  function openDialog(title = "新增", row?: FormItemProps) {
    // 将文字转区域码回显省市区
    let country;
    if (row?.country && row?.province && row?.city) {
      country = convertTextToCode(row.province, row.city, row.area).split(",");
    }

    addDialog({
      title: `${title}仓库`,
      props: {
        formInline: {
          id: row?.id ?? undefined,
          depositoryName: row?.depositoryName ?? undefined,
          type: row?.type ?? undefined,
          labelIdList: row?.labelIdList ?? [],
          country,
          province: row?.province ?? undefined,
          city: row?.city ?? undefined,
          area: row?.area ?? undefined,
          address: row?.address ?? undefined,
          contacts: row?.contacts ?? undefined,
          contact: row?.contact ?? undefined,
          des: row?.des ?? undefined,
          depositoryCode: row?.depositoryCode ?? undefined
        }
      },
      width: "30%",
      fullscreenIcon: true,
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef }),
      beforeSure: (done, { options }) => {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline as FormItemProps;
        function chores() {
          message(`${title}成功`, {
            type: "success"
          });
          setTimeout(() => done(), 800); // 关闭弹窗
          getDetailInfo(); // 刷新表格数据
        }
        FormRef.validate(async valid => {
          if (valid) {
            console.log("curData", curData);
            if (curData.country) {
              //  区域码转汉字：
              curData.province = CodeToText[curData.country[0]];
              curData.city = CodeToText[curData.country[1]];
              curData.area = CodeToText[curData.country[2]];
              curData.country = "中国";
            }
            if (title === "新增") {
              // 表单规则校验通过
              // 实际开发先调用新增接口，再进行下面操作
              chores();
            } else {
              // 实际开发先调用修改接口，再进行下面操作
              const { code } = await depositoryUpdate(curData);
              if (code == 200) {
                chores();
              }
            }
          }
        });
      }
    });
  }

  const storeId = ref<any>("");
  const storeInfo = ref<any>({});

  async function getDetailInfo() {
    const res = await getDepositoryDetail({ id: storeId.value });
    storeInfo.value = res.data;
  }

  onMounted(async () => {
    const { query } = useRoute();
    storeId.value = query.id;
    if (query.id) getDetailInfo();
  });

  return {
    storeInfo,
    useRenderIcon,
    goBack,
    openDialog
  };
}
